<template>
  <div class="layout">
    <Menu mode="horizontal" theme="dark" active-name="loginShow" @on-select="chooseMenu">
      <div class="layout-logo">
        <img src="../assets/logo.png" alt="">
      </div>
      <div class="layout-nav pull-right">
        <MenuItem name="loginShow" v-if="!currentUser">
          <Icon type="log-in"></Icon>
          登录
        </MenuItem>
        <MenuItem name="logout" v-if="currentUser">
          {{currentUser.username}}
          <Icon type="log-out"></Icon>
        </MenuItem>
        <MenuItem name="regShow" v-if="!currentUser">
          <Icon type="person-add"></Icon>
          注册
        </MenuItem>
        <MenuItem name="aboutShow">
          <Icon type="information-circled"></Icon>
          关于我们
        </MenuItem>
      </div>
    </Menu>
    <div class="layout-content" :style="{'min-height':contentHeight}">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div class="layout-copy">
      2011-2016 &copy; TalkingData
    </div>
    <modal :isShow=loginShow @on-close="closeMoadl('loginShow')">
      <Form ref="loginForm" :model="loginForm" :rules="loginFormRule" :label-width="80">
        <FormItem label="姓名" prop="username">
          <Input v-model="loginForm.username" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input type="password" v-model="loginForm.password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="login('loginForm')">登陆</Button>
        </FormItem>
      </Form>
    </modal>
    <modal :isShow=regShow @on-close="closeMoadl('regShow')">注册</modal>
    <modal :isShow=aboutShow @on-close="closeMoadl('aboutShow')">
      <p>
        本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。 </p>
    </modal>
  </div>
</template>
<script>
  import modal from '../components/base/modal.vue'
  export default {
    name: 'layout',
    components: {
      modal
    },
    data () {
      return {
        loginShow: false,
        regShow: false,
        aboutShow: false,
        contentHeight: window.innerHeight - 140 + "px",
        currentUser: {
          username: '',
          password: '',
        },
        loginForm: {
          username: 'yudongdong',
          password: '123123',
        },
        loginFormRule: {
          username: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
            {type: 'string', min: 3, message: '用户名长度至少为3', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {type: 'string', min: 3, message: '密码长度至少为3', trigger: 'blur'}
          ],
        }

      }

    },
    mounted: function () {
      this.$nextTick(() => {
        let localUser = this.util.getUser();
        if (localUser) {
          this.currentUser = localUser;
        }

      })
    },
    computed: {},
    methods: {
      chooseMenu: function (index) {
        if (index === 'logout') {
          this.currentUser = '';
        } else {
          this[index] = true;
        }
      },
      closeMoadl: function (index) {
        this[index] = false;
      },
      login: function (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.util.ajax.post('/api/login').then((result) => {
              let user = result.data;
              if (user.username !== this.loginForm.username) {
                this.$Message.error('账号错误!');
              } else if (user.userId !== this.loginForm.password) {
                this.$Message.error('密码错误!');
              }
              else {
                this.util.setUser(user);
                this.currentUser = this.util.getUser('user');
                this.$Message.success('登陆成功!');
                this.closeMoadl('loginShow');
              }
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      logout: function () {
        this.currentUser = null;
        localStorage.clear();
      }
    }
  }
</script>
<style lang="scss">
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    .layout-logo {
      height: 50px;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 5px;
      left: 50px;
      img {
        height: 100%
      }
    }
    .layout-nav {
      width: 420px;
      margin: 0 auto;
    }
    .layout-assistant {
      width: 300px;
      margin: 0 auto;
      height: inherit;
    }
    .layout-breadcrumb {
      padding: 10px 15px 0;
    }
    .layout-content {
      min-height: 200px;
      margin: 15px;
      overflow: hidden;
      background: #fff;
      border-radius: 4px;
    }
    .layout-content-main {
      padding: 10px;
    }
    .layout-copy {
      bottom: 0;
      text-align: center;
      padding: 10px 0 20px;
      color: #9ea7b4;
    }
  }

  .text-c {
    text-align: center
  }

  .text-l {
    text-align: left;
  }

  .text-r {
    text-align: right;
  }

  .padding {
    padding: 5px
  }
</style>
